<!DOCTYPE html>
<html>
<head>
    <title>应用表</title>
    <#include "../../include/head-file.ftl">
</head>
<body>
<div id="index" v-cloak class="ms-index">
    <el-header class="ms-header" height="50px">
        <el-col :span="12">
                <el-button type="primary" icon="el-icon-plus" size="mini" @click="save()">新增</el-button>
                <el-button type="danger" icon="el-icon-delete" size="mini" @click="del(selectionList)"
                           :disabled="!selectionList.length">删除
                </el-button>
        </el-col>
    </el-header>
    <div class="ms-search">
        <el-row>
            <el-form :model="form" ref="searchForm" label-width="120px" size="mini">
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="站点名称" prop="websiteName">
                            <el-input v-model="form.websiteName"
                                      :disabled="false"
                                      :style="{width:  '100%'}"
                                      :clearable="true"
                                      placeholder="请输入站点名称">
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="16" style="text-align: right;padding-right: 10px;">
                        <el-button type="primary" icon="el-icon-search" size="mini" @click="currentPage=1;list()">查询
                        </el-button>
                        <el-button @click="rest" icon="el-icon-refresh" size="mini">重置</el-button>
                    </el-col>
                </el-row>
            </el-form>
        </el-row>
    </div>
    <el-main class="ms-container">
        <el-table v-loading="loading" height="calc(100vh - 68px)" ref="multipleTable" class="ms-table-pagination" border :data="dataList"
                  tooltip-effect="dark" @selection-change="handleSelectionChange">
            <template slot="empty">
                {{emptyText}}
            </template>
            <el-table-column type="selection" width="40"></el-table-column>
            <el-table-column label="站点名称"  align="left" prop="websiteName">
            </el-table-column>
            <el-table-column label="域 名" width="300" align="left" prop="websiteUrl">
            </el-table-column>
            <el-table-column label="每年续费日期" width="120" align="center" prop="websitePayDate">
            </el-table-column>
            <el-table-column label="状态" align="center" width="100">
                <template slot-scope="scope">
                    <div class="lamp">
                        <em :class="scope.row.websiteState=='0' ? 'yes' : 'no'"></em>
                        <span v-if="scope.row.websiteState == '0'">运行中</span>
                        <span v-else>已停止</span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="操作" :render-header="renderHeader" fixed="right" width="250" align="center">
                <template slot-scope="scope">
                        <el-link type="primary" :underline="false" @click="backupSite(scope.row.websiteId)">备份数据</el-link>
                        <el-link type="primary" :underline="false" @click="save(scope.row.websiteId)">编辑</el-link>
                        <el-link type="primary" :underline="false" @click="del([scope.row])">删除</el-link>
                        <el-link type="primary" :underline="false" @click="setManager(scope.row)">设置管理员</el-link>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                background
                :page-sizes="[5, 10, 20]"
                layout="total, sizes, prev, pager, next, jumper"
                :current-page="currentPage"
                :page-size="pageSize"
                :total="total"
                class="ms-pagination"
                @current-change='currentChange'
                @size-change="sizeChange">
        </el-pagination>
    </el-main>
</div>
</body>

</html>
<script>
    var indexVue = new Vue({
        el: '#index',
        data: {
            dataList: [], //应用表列表
            selectionList: [],//应用表列表选中
            total: 0, //总记录数量
            pageSize: 10, //页面数量
            currentPage: 1, //初始页
            mananger: ms.manager,
            loading: true,//加载状态
            emptyText: '',//提示文字
            //搜索表单
            form: {
                // 站点名称
                websiteName: null,
            },
        },
        methods: {
            // 渲染element表头（实际功能时为表头增加tooltip
            renderHeader: function(h, obj) {
                var tipText = '备份数据\n' +
                    '1、只会备份mdiy_model、mdiy_dict、cms_category、cms_content以及自定义模型自动生成的表\n' +
                    '2、备份的sql会保存在ms.website.bakup/站点id/日期.sql文件中\n' +
                    '3、ms.website.bakup配置默认为sql-bak（相对路径）\n\n' +
                    '设置管理员\n' +
                    '1、设置当前站点总管理，控制子站点可使用哪些菜单权限\n' +
                    '2、站点总管理员登录站点后台，可以再分配站点子管理员权限';

                //返回数组交给el-column渲染
                return [
                    obj.column.label,
                    h('el-tooltip', {
                        props: {
                            content: tipText,
                        }
                    }, [
                        h('span', {
                            class: {
                                'el-icon-question': true
                            }
                        })
                    ])
                ];
            },
            //查询列表
            list: function() {
                var that = this;
                that.loading=true;
                var page={
				pageNo: that.currentPage,
				pageSize : that.pageSize
			}
			var form = JSON.parse(JSON.stringify(that.form))
			for (key in form){
				if(!form[key]){
					delete  form[key]
				}
			}
			history.replaceState({form:form,page:page,total:that.total},"");
                setTimeout(() => {
                    ms.http.get(ms.manager + "/website/list.do", {...that.form,...page}).then(
                        function(data) {
                            if(data.data.total <= 0) {
                                that.loading = false;
                                that.emptyText = '暂无数据'
                                that.dataList = [];
                            } else {
                                that.emptyText = '';
                                that.loading = false;
                                that.total = data.data.total;
                                that.dataList = data.data.rows;
                            }
                        }).catch(function(err) {
                        console.log(err);
                    });
                }, 500);
            },
            //应用表列表选中
            handleSelectionChange: function(val) {
                this.selectionList = val;
            },
            //删除
            del: function(row) {
                var that = this;
                that.$confirm('此操作将永久删除所选内容, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    var ids = row.map(item => item = item.websiteId);
                    ids = ids.join(',');
                    ms.http.get(ms.manager + "/website/batchDelete.do", {websiteIds: ids}, {
                        headers: {
                            'Content-Type': 'application/json'
                        }
                    }).then(
                        function(data) {
                            if(data.result) {
                                that.$notify({
                                    title: '提示',
                                    type: 'success',
                                    message: '删除成功!'
                                });
                                //删除成功，刷新列表
                                that.list();
                            }else {
                                that.$notify({
                                    title: '失败',
                                    message: data.msg,
                                    type: 'warning'
                                });
                            }
                        });
                }).catch(() => {
                    that.$notify({
                        title: '提示',
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //新增
            save: function(id) {
                if(id) {
                    location.href = this.mananger + "/website/" + id + "/edit.do?websiteId="+id;
                } else {
                    location.href = this.mananger + "/website/add.do";
                }
            },
            backupSite: function(id){
                var that = this
                ms.http.get(ms.manager+"/mwebsite/backup/backupSite",{appId:id}).then(function (res) {
                    if(res.result){
                        that.$notify({
                            title: '成功',
                            message: '备份成功',
                            type: 'success'
                        });
                    }else {
                        that.$notify({
                            title: '失败',
                            message: '备份失败',
                            type: 'warning'
                        });
                    }
                }).finally(function () {
                })
            },
            //表格数据转换
            //pageSize改变时会触发
            sizeChange: function(pagesize) {
                this.pageSize = pagesize;
                this.list();
            },
            //currentPage改变时会触发
            currentChange: function(currentPage) {
                this.currentPage = currentPage;
                this.list();
            },
            //重置表单
            rest() {
                this.currentPage = 1;
                this.$refs.searchForm.resetFields();
                this.list();
            },
            //设置管理员
            setManager: function (data) {
                location.href = this.mananger + "/website/manager/form.do?websiteId="+data.websiteId;
            }
        },
        created() {
            if(history.state){
                this.form = history.state.form;
                this.total = history.state.total;
                this.currentPage = history.state.page.pageNo;
                this.pageSize = history.state.page.pageSize;
            }
            this.list();
        },
    })
</script>
<style>
    #index .ms-search {
        padding: 20px 0 0;
    }

    .lamp {
        align-items: center;
    }

    .lamp .yes {
        background: #009900 !important;
    }

    .lamp .no {
        background: #F04134 !important;
    }

    .lamp em {
        display: inline-block;
        background: #0099ff;
        margin: 0 4px 1px 0;
        width: 6px;
        height: 6px;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        -ms-border-radius: 50%;
        -o-border-radius: 50%;
        border-radius: 50%;
        text-align: center;
        line-height: 6px;
    }
    /* 让column渲染的数据识别\n*/
    .el-tooltip__popper {
        white-space: pre-line;
    }
</style>